<template>
    <div class="app-container">
      <div class="container-bg">
        <el-row :gutter="15">
            <el-form
            ref="elForm"
            :model="form"
            size="medium"
            label-width="110px"
            label-position="left"
            :rules="rules"
            >
            <el-col :span="13" v-if="false">
                <div class="tab-line">
                <div>时区设置</div>
                </div>
            </el-col>
            <el-col :span="13" v-if="false">
                <el-form-item label="时区选择" class="ml-20">
                <el-select
                    v-model="form.iTimeZoneId"
                    placeholder="请选择时区"
                    style="width: 500px"
                    v-isNormal
                >
                    <el-option
                    v-for="item in TimezoneList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                    <!-- <el-option key="2" label="GMT-13:00" value="2" /> -->
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="13" v-if="false">
                <el-form-item label="夏令时" class="ml-20">
                <el-switch
                    v-model="form.iAutoDst"
                    :active-value="activeValue"
                    :inactive-value="inactiveValue"
                    v-isNormal
                >
                </el-switch>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
                <el-form-item size="large">
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px"
                    @click="submitForm"
                    >保存</el-button
                >
                </el-form-item>
            </el-col> -->
            <el-col :span="13">
                <div class="tab-line">
                <div>NTP设置</div>
                <div
                    class="status-icon"
                    :class="{ actives: form.iAutoMode == 1 }"
                    @click="checkTab(1)"
                    v-isNormal
                ></div>
                </div>
            </el-col>
            <el-col :span="13">
                <el-form-item>
                <el-radio-group v-model="form.iAutoModeType" disabled>
                    <el-radio class="radioBox" :label="1">
                    <el-form-item label="NTP地址">
                        <el-input
                        class="input"
                        v-model="form.sNtpServers"
                        v-isNormal
                        ></el-input>
                    </el-form-item>
                    </el-radio>
                    <el-radio class="radioBox" :label="2" v-if="false">
                    <el-form-item label="云平台">
                        <el-input
                        class="input"
                        v-model="form.sAiotServer"
                        v-isNormal
                        ></el-input>
                    </el-form-item>
                    </el-radio>
                    <el-radio class="radioBox" :label="3" v-if="false">
                    <el-form-item label="第三方平台">
                        <el-input
                        class="input"
                        v-model="form.sThirdpartyServer"
                        v-isNormal
                        ></el-input>
                    </el-form-item>
                    </el-radio>
                </el-radio-group>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="13">
                <el-form-item label="NTP地址" prop="sNtpServers">
                <el-input
                    v-model="form.sNtpServers"
                    placeholder="请输入NTP地址"
                    :disabled="form.iAutoMode == 1"
                    :style="{ width: '100%' }"
                >
                </el-input>
                </el-form-item>
            </el-col> -->
            <el-col :span="13">
                <el-form-item label="校准间隔" prop="iRefreshTime" class="ml-20">
                <el-input
                    v-model="form.iRefreshTime"
                    type="number"
                    placeholder="请输入校准间隔"
                    :disabled="form.iAutoMode == 0"
                    :style="{ width: '100%' }"
                    @input="numberChange(arguments[0], 60)"
                >
                    <template slot="append">分钟</template>
                </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item size="large">
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px"
                    @click="submitForm('elForm')"
                    v-isNormal
                >
                    保存
                </el-button>
                <!-- <el-button @click="resetForm">重置</el-button> -->
                </el-form-item>
            </el-col>
            <el-col :span="13">
                <div class="tab-line">
                <div>手动校准</div>
                <div
                    class="status-icon"
                    :class="{ actives: form.iAutoMode == 0 }"
                    @click="checkTab(0)"
                    v-isNormal
                ></div>
                </div>
            </el-col>
            <el-col :span="13">
                <el-form-item label="设备时间" prop="times" class="ml-20">
                <el-input
                    v-model="form.times"
                    placeholder="请输入设备时间"
                    :style="{ width: '100%' }"
                    disabled
                >
                </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="13">
                <el-form-item label="设置时间" prop="time" class="ml-20">
                <el-date-picker
                    @input="onInput()"
                    :clearable="false"
                    v-model="form.time"
                    type="datetime"
                    placeholder="选择日期时间"
                    :disabled="form.iAutoMode == 0 && form.syncTime"
                    :value-format="'yyyy-MM-dd HH:mm:ss'"
                    v-isNormal
                >
                </el-date-picker>
                <!-- <el-checkbox
                    style="margin-left: 20px"
                    v-model="form.syncTime"
                    @change="asyncDate"
                >
                    同步本地时间
                </el-checkbox> -->
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item size="large">
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px"
                    @click="asyncDate"
                    v-isNormal
                >
                同步本地时间
                </el-button>
                <label class="save-tips">注意：修改时间可能导致登录过期！</label>
                <!-- <el-button @click="resetForm">重置</el-button> -->
                </el-form-item>
            </el-col>
            </el-form>
        </el-row>
        </div>
    </div>
  </template>
  
  <script>
  import {
    getSystemNetworkApi,
    getSystemNetworkTimeApi,
    editSystemNetworkApi,
    editSystemNetworkTimeApi,
    getTimezoneListApi,
  } from "@/api/access/equipment";
  export default {
    props: {},
    watch: {
      form: {
        handler(val) {},
      },
    },
    data() {
      return {
        activeValue: 1,
        inactiveValue: 0,
        TimezoneList: [],
        form: {},
        rules: {
          // sNtpServers: [
          //   {
          //     trigger: "change",
          //     required: true,
          //     message: "请输入NTP地址",
          //   },
          // ],
          iRefreshTime: [
            {
              trigger: "change",
              required: true,
              message: "请输入校准间隔",
            },
            {
              required: true,
              pattern: /^(?:[1-9]|[1-5]\d|60)$/,
              message: "只能输入1-60区间的整数",
              trigger: ["blur", "change"],
            },
          ],
          // time: [
          //   {
          //     trigger: "change",
          //     required: true,
          //     message: "请输入时间",
          //   },
          // ],
        },
        syncTime: false, // 同步时间
        timeOut: null,
        timeOut2: null,
      };
    },
    created() {
      this.getTimezoneList();
      this.getSysteamNet();
    },
    methods: {
      numberChange(val, maxNum) {
        //转换数字类型
        this.form.iRefreshTime = Number(val);
        //重新渲染
        this.$nextTick(() => {
          //比较输入的值和最大值，返回小的
          let num = Math.min(Number(val), maxNum);
          //输入负值的情况下， = 0（可根据实际需求更该）
          if (num < 0) {
            this.form.iRefreshTime = 1;
          } else {
            //反之
            this.form.iRefreshTime = num;
          }
        });
      },
      onInput() {
        this.$forceUpdate();
      },
      submitForm() {
        this.$refs.elForm.validate((valid) => {
          if (valid) {
            let params = { ...this.form };
            delete params.syncTime;
            // let p2 = new Promise((resolve, reject) => {
            //   editSystemNetworkTimeApi({ time: params.time.replace(/ /, "T") })
            //     .then((res) => {
            //       clearTimeout(this.timeOut);
            //       let time = res.time ? res.time.replace(/T/, " ") : "";
            //       this.getNowTime(time);
            //       resolve(res);
            //     })
            //     .catch((err) => {
            //       resolve(err);
            //     });
            // });
  
            let p1 = new Promise((resolve, reject) => {
              params.iRefreshTime = +params.iRefreshTime;
              editSystemNetworkApi(params)
                .then((res) => {
                  // resolve(res);
                  this.$message.success("保存成功");
                })
                .catch((err) => {
                  // resolve(err);
                  this.$message.error("保存失败");
                });
            });
  
            // Promise.all([p1, p2]).then((res) => {
            //   this.$message.success("保存成功");
            // });
          }
        });
      },
      resetForm() {},
      checkTab(val) {
        this.form.iAutoMode = val;
      },
      // 获取网络
      getSysteamNet() {
        getSystemNetworkApi().then((res) => {
          this.form = Object.assign({}, this.form, res);
          // console.log(this.form);
        });
        getSystemNetworkTimeApi().then((res) => {
          this.form.time = res.time ? res.time.replace(/T/, " ") : "";
          this.getNowTime(this.form.time);
        });
      },
      getTimezoneList() {
        // getTimezoneListApi().then((res) => {
        //   this.TimezoneList = res;
        //   this.TimezoneList.forEach((item) => {
        //     item.label = item.utc + "   " + item.name;
        //   });
        // });
      },
      getNowTime(hasTime) {
        let timestamp = this.$moment(hasTime).valueOf() / 1000;
        this.timeOut = setInterval(() => {
          timestamp += 1;
          let time = this.$moment(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss");
          this.$set(this.form, "times", time);
        }, 1000);
      },
      asyncDate() {
        // if (this.form.syncTime) {
          this.form.time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
          this.timeOut2 = setInterval(() => {
            this.form.time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
          }, 1000);
          this.$message.success("同步本地时间成功");
        // } else {
        //   clearTimeout(this.timeOut2);
        // }
      },
    },
    destroyed() {
      clearTimeout(this.timeOut);
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .tab-line {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f9f9f9;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px;
    .status-icon {
      position: relative;
      cursor: pointer;
      &::after {
        position: absolute;
        content: "";
        left: -10px;
        top: -10px;
        width: 20px;
        height: 20px;
        border-width: 1px;
        border-style: solid;
        border-color: #006eff;
        border-radius: 50%;
      }
    }
    .actives {
      &::before {
        position: absolute;
        content: "";
        left: -6px;
        top: -6px;
        width: 12px;
        height: 12px;
        background-color: #006eff;
        border-radius: 50%;
      }
    }
  }
  .radioBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .input {
      width: 300px;
    }
  }
  .save-tips {
    margin-left: 20px;
    color: #fd3939;
  }
  .ml-20 {
    margin-left: 20px;
  }
  </style>
  